/*
 * @Author: WangLi
 * @Date: 2021-07-18 22:03:14
 * @LastEditors: WangLi
 * @LastEditTime: 2021-09-03 13:32:02
 * @Description:
 */
import createStore from "@shene/wx-store";
import { getThemeCluster } from "../utils/theme";
import { SET_THEME_STYLES } from "./types";

function createThemeStyles(color) {
  if (!color) {
    return "";
  }
  let themeStyles = `--theme-color: ${color}; --theme-button-color: ${color};`;
  const themes = getThemeCluster(color.slice(1));
  themes.forEach((color, index) => {
    themeStyles += `--theme-color-light-${index + 1}: ${color};`;
  });
  return themeStyles;
}

const localThemeColor = wx.getStorageSync("themeColor") || "";

const store = createStore({
  state: {
    count: 0,
  },
  globalState: {
    themeStyles: createThemeStyles(localThemeColor),
  },
  mutations: {
    [SET_THEME_STYLES](setState, themeStyles) {
      setState({
        themeStyles,
      });
    },
    setCount(setState, count) {
      setState({
        count,
      });
    },
  },
  actions: {
    setThemeStyles({ commit, state }, themeColor) {
      const themeStyles = createThemeStyles(themeColor);
      wx.setStorageSync("themeColor", themeColor);
      commit(SET_THEME_STYLES, themeStyles);
    },
    setCount({ commit, state }) {
      setTimeout(() => {
        commit("setCount", ++state.count);
      }, 3000);
    },
  },
});

export default store;
